<template>
    <div>
        <c-header :p-title="'陪同参会人员管理'">
            <div class="d-flex justify-content-end align-items-center">
                <button class="btn btn-sm btn-success m-r-sm" @click="exportAllFile">导出最新全体参会人员</button>
                <button type="button" class="btn btn-sm btn-info d-lg-block"  @click="$router.go(-1)"><i class="fa fa-mail-reply m-r-sm"></i>返回</button>
                <btn-refresh class='m-l-15' :p-data='init'></btn-refresh>
            </div>
        </c-header>
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="panel-heading  search-heading">
                            <small class="text-muted">搜索筛选项：</small>
                            <div class="m-b-sm">
                                <form class="clearfix" action="javascript:void(0)">
                                    <div class="pull-left m-r m-b-sm">
                                        <label class="control-label">姓名：</label>
                                        <Input class='thumb-search' v-model="search.name" placeholder="请输入姓名"/>
                                    </div>
                                    <div class="pull-left m-r m-b-sm">
                                        <label class="control-label">电话：</label>
                                        <Input class='thumb-search' v-model="search.phone" placeholder="请输入电话"/>
                                    </div>
                                    <div class="pull-left m-r m-b-sm">
                                        <label class="control-label">公司名称：</label>
                                        <Input class="thumb-search" v-model="search.organization" placeholder="请输入公司名称" />
                                    </div>
                                    <div class="pull-left m-r m-b-sm">
                                        <label class="control-label">陪同接待人员姓名：</label>
                                        <Input class="thumb-search" v-model="search.ptry_name" placeholder="请输入陪同接待人员姓名" />
                                    </div>
                                    <div class="pull-left m-r m-b-sm">
                                        <label class="control-label">陪同接待人员电话：</label>
                                        <Input class="thumb-search" v-model="search.ptry_phone" placeholder="请输入陪同接待人员电话" />
                                    </div>
                                    <div class="pull-left m-r m-b-sm">
                                        <label class="control-label">行业地位：</label>
                                        <status-select class="thumb-search" :p-data="search.standing" p-name="people_standing" :p-far='true' @on-change="searchSelectStanding"></status-select>
                                    </div>
                                    <div class="pull-left w100 text-right">
                                        <button class="btn btn-sm btn-info m-r-sm" @click="exportFile">导出文档</button>
                                        <button class="btn btn-sm btn-primary m-r-sm" @click="importFile">导入文档</button>
                                        <button class="btn btn-sm btn-success" @click="editSetWith">设置陪同</button>
                                        <button class="btn btn-sm btn-danger m-r-sm" @click="editCleanWith">取消陪同</button>
                                        <button class="btn btn-sm btn-info" type="button" @click="searchChange()">搜索</button>
                                        <Tooltip content="重置默认搜索项" placement="top">
                                            <button class="btn btn-sm btn-dark" type="button" @click="searchReset(true)">重置</button>
                                        </Tooltip>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="table-responsive"  v-if='list'>
                            <rich-table
                                    :p-data='list'
                                    :p-select="true"
                                    :p-edit="false"
                                    :p-plus-callback="richTablePlusCallback"
                                    @on-select="selectChange">
                            </rich-table>
                            <div  v-show='!list.length' class="text-center m-b-sm">
                                暂无数据！
                            </div>
                        </div>
                        <hr/>
                        <footer class="panel-footer text-right">
                            <CPage :total="search.page_total"
                                   :current='search.page_current'
                                   :page-size='search.page_row'
                                   @on-change='pageCurrentChange'
                                   @on-page-size-change='pageRowChange'></CPage>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
        <operate-clean-with ref="operate_clean_with" @on-change="initSubmit"></operate-clean-with>
        <operate-set-with ref="operate_set_with" @on-change="initSubmit"></operate-set-with>

        <operate-import ref="operate_import" @on-change="initSubmit"></operate-import>
    </div>
</template>
<script>
    import serCustomer from '../../serves/api-customer'
    import operateCleanWith from './OperateCleanWith'
    import operateSetWith from './OperateSetWith'
    import richTable from './RichTable'
    import operateImport from './OperateWithImport.vue'

    const __page_key = 'customer.with.detail';
    let searchDef = {
        name:"",
        organization:"",
        phone:"",
        ptry_name:"",
        ptry_phone:"",
        standing:"",
        page_row:'',
        page_current:'',
        page_total:''
    };
    export default{
        props:{
            pParams:Object,
            pQuery:Object,
        },
        components:{
            operateCleanWith,
            operateSetWith,
            operateImport,
            richTable,
        },
        data(){
            return{
                id:'',
                title:'',
                list:undefined,
                search:{},
                selList:[]
            }
        },
        computed:{
        },
        beforeMount(){
            this.$set(this, 'id',this.pParams&&this.pParams.id||this.$route.params.id);
            this.$set(this, 'title',this.pQuery&&this.pQuery.title||this.$route.query.title);
            this.searchReset();
        },
        mounted(){
            this.init();
        },
        methods:{
            searchReset(update,pageState){
                if(pageState){
                    this.$clientPage.def(this.search);
                    return false
                }
                const _p=this.$clientPage.getData(__page_key);
                if(_p){
                    this.$set(this,'search',_p);
                }else{
                    this.$set(this,'search',Object.assign({},searchDef));
                    this.$clientPage.def(this.search);
                }
                if(update){
                    this.init();
                }
            },
            searchPage(page){
                this.$clientPage.set(this.search,page);
            },
            searchChange(){
                this.$clientPage.def(this.search);
                this.init();
            },
            pageRowChange(num){
                if(num!= this.search.page_row){
                    this.$set(this.search,'page_row',num);
                    if(this.search.page_current == 1){
                        this.init();
                    }
                }
            },
            pageCurrentChange(current){
                if(current!= this.search.page_current){
                    this.$set(this.search,'page_current',current);
                    this.init();
                }
            },
            linkPageChange(name,params,query){
                this.$clientPage.setData(__page_key,Object.assign({},this.search));
                if(name){
                    this.$router.push({name:name,params:params,query:query})
                }
            },
            //------------------------------------------------------------------------
            async init(data){
                let res = await serCustomer.listWith({
                    page:this.search.page_current,
                    size:this.search.page_row,
                    mee_id:this.id,
                    name:this.search.name,
                    organization:this.search.organization,
                    phone:this.search.phone,
                    ptry_name:this.search.ptry_name,
                    ptry_phone:this.search.ptry_phone,
                    standing:this.search.standing,
                });
                this.selList = [];
                if(res.code==1){
                    this.list = res.data||[];
                    this.searchPage(res.addtion_data&&res.addtion_data.page_info);
                }else{
                    this.list = [];
                    this.searchReset(undefined,true);
                    this.$Message.error(res.message);
                }
                return true;
            },
            searchSelectStatus(value){
                this.$set(this.search,'status',value);
            },
            searchSelectStanding(value){
                this.$set(this.search,'standing',value);
            },
            initSubmit(state){
                if(state){
                    this.init()
                }
            },
            editStatus(type,data){
                let modal_name = '';
                if(type=='ok'){
                    modal_name = 'operate_ok'
                }else if(type=='inject'){
                    modal_name = 'operate_inject'
                }
                this.$refs[modal_name].handleOpen({
                    id:data.id
                });
            },
            richTablePlusCallback(){
                //是否陪同 need_pt
                return [{
                    title:'是否陪同',
                    width:90,
                    key:'need_pt'
                }]
            },
            selectChange(value){
                this.$set(this,'selList',value);
            },
            editCleanWith(){
                if(this.selList.length==0){
                    this.$Message.warning('请选择要操作的数据');
                    return false
                }
                this.$refs['operate_clean_with'].handleOpen({
                    ids:this.selList
                })
            },
            editSetWith(){
                if(this.selList.length==0){
                    this.$Message.warning('请选择要操作的数据');
                    return false
                }
                this.$refs['operate_set_with'].handleOpen({
                    ids:this.selList
                })
            },
            importFile(){
                this.$refs['operate_import'].handleOpen({})
            },
            exportFile(){
                serCustomer.exportWithFile(this.search);
            },
            exportAllFile(){
                serCustomer.exportWithAllFile();
            }
        }
    }
</script>